// 定义变量
// 计算rem的基准字体
@rem-base-font-size: 64px;

// UI设计图的分辨率宽度
@UI-resolution-width: 1440px;

// 需要适配的屏幕宽度
@device-widths: 240px, 320px, 360px, 375px, 412px, 480px, 540px, 640px, 720px, 768px, 1024px, 1440px;

// // 颜色定义规范
@color-background: #222;
@color-background-d: rgba(0, 0, 0, 0.3);
@color-highlight-background: #333;
@color-dialog-background: #666;
@color-theme: #f7f9fc;
@color-theme-d: rgba(255, 205, 49, 0.5);
@color-sub-theme: #d93f30;
@color-text: #fff;
@color-text-d: rgba(255, 255, 255, 0.3);
@color-text-l: rgba(255, 255, 255, 0.5);
@color-text-ll: rgba(255, 255, 255, 0.8);

@color-border-gray: #d7d7d7;
@color-bluegray: #e2e7ea;

@color-green: #3cb54b;
@color-lightblack: #686868;
@color-black: #393e46;
@color-white: #fff;
@color-red: #ff5252;
@color-orange: orange;
@color-skyblue: #5eb7f1;
@color-blue: #3097f3;
@color-gray: #ababab;
@color-pink: #ec7a8f;
@color-lightpink: #fae8ee;


// //字体定义规范
@font-size-small-s: 10px;
@font-size-small: 12px;
@font-size-medium: 14px;
@font-size-medium-x: 16px;
@font-size-large: 18px;
@font-size-large-x: 22px;

// common style 
#w100 {
  width: 100%;
}
#h100 {
  height: 100%;
}
#tac {
  text-align: center;
}
#tal {
  text-align: left;
}
#tar {
  text-align: right;
}
#fw {
  font-weight: bold;
}
#bdb {
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box;
  max-width:960px;
}
#bginit{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

// .icon {
//     width: 1em; height: 1em;
//     vertical-align: -0.15em;
//     fill: currentColor;
//     overflow: hidden;
//  }

#contentbg1{
	background-color: #e3e8eb;
}

#fs0{
  font-size: 0;
}

#mrt1{
	// margin-top: 1rem;
  margin-top: 0.5rem;
}
#mrb1{
  margin-bottom: 0.5rem;
}
#mrl1{
  margin-left: 0.5rem;
}
#mrr1{
  margin-right: 0.5rem;
}
#pdt1{
  padding-top: 0.5rem;
}
#pdb1{
  padding-bottom: 0.5rem;
}
#pdl1{
  padding-left: 0.5rem;
}
#pdr1{
  padding-right: 0.5rem;
}
#lh0-4{
	line-height: 0.4rem;
}
#lh0-5{
	line-height: 0.5rem;
}
#lh0-6{
	line-height: 0.6rem;
}
#lh0-8{
	line-height: 0.8rem;
}
#lh0-9{
	line-height: 0.9rem;
}
#lh1{
	line-height: 1rem;
}
#lh1-1{
	line-height: 1.1rem;
}
#lh1-2{
	line-height: 1.2rem;
}
#lh1-3{
	line-height: 1.3rem;
}
#lh1-4{
	line-height: 1.4rem;
}
#lh1-6{
	line-height: 1.6rem;
}
#lh2{
	line-height: 2rem;
}
#fs0-5{
	font-size: 0.5rem;
}
#fs0-6{
	font-size: 0.6rem;
}
#fs0-7{
	font-size: 0.7rem;
}
#fs0-8{
	font-size: 0.8rem;
}
#fs0-9{
	font-size: 0.9rem;
}
#fs1{
	font-size: 1rem;
}

// 隐藏滚动条
#hide-scroll{
	display: none; //Safari and Chrome
	-ms-overflow-style: none; //IE 10+
	overflow: -moz-scrollbars-none; //Firefox
}

// input
#input-style{
	border: 0px;
	outline:none;
	cursor: pointer;
}

#pullup-style{
	#tac;
	line-height: 2rem;
	color: @color-gray;
}

// component background init
#component-bginit{
	position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: @color-theme;
}

#icon-fs0-5-lb{
	color: @color-lightblack;
	#fs0-5;
}

// btn active
#btn-active{
	margin: 3.5rem auto;
	line-height: 2.5rem;
	background-color: @color-green;
	color: @color-white;
	width: 80%;
	border-radius: 5rem; 
}

// btn unable
#btn-unable{
	margin: 3.5rem auto;
	line-height: 2.5rem;
	background-color: @color-border-gray;
	color: @color-white;
	width: 80%;
	border-radius: 5rem; 
}

// muse-ui btn-style
#btn-muse{
	#w100;
	height: 1rem;
	font-size: @font-size-medium-x;
}
#btn-wrapper{
	#tac;
	margin: 0.8rem auto;
	padding: 0.5rem 0;
	width: 80%;
}

// slider动画样式
#slider-enter-leave-active{
	transition: all 0.5s;
}
#slider-enter-leave-to{
	transform: translate3d(100%, 0, 0);
  opacity: 0.5;
}

// 全屏提示组件
#full-screen-tips{
	#h100;
  position: relative;
  .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    #w100;
    .slot{
      #w100;
      #tac;
			// line-height: 4rem;
			#lh1;
    }
    .img{
      padding: 0 35%;
      img{
        #w100;
      }
    }
  }
}

/* 父元素-flex容器 */
#flex {
	// display: box;
	/* OLD - Android 4.4- */
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* 子元素-平均分栏 */
#flex1 {
	-webkit-box-flex: 1;
	/* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;
	/* OLD - Firefox 19- */
	width: 20%;
	/* For old syntax, otherwise collapses. */
	-webkit-flex: 1;
	/* Chrome */
	-ms-flex: 1;
	/* IE 10 */
	flex: 1;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* 父元素-横向排列（主轴） */
#flex-h {
	// display: box;
	/* OLD - Android 4.4- */
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	/* 09版 */
	-webkit-box-orient: horizontal;
	/* 12版 */
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}

/* 父元素-横向排列（主轴）起点在右端 */
#flex-h-r {
	// display: box;
	/* OLD - Android 4.4- */
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	/* 09版 */
	-webkit-box-orient: horizontal;
	/* 12版 */
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	-o-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

/* 父元素-横向换行 */
#flex-hw {
	/* 09版 */
	-webkit-box-lines: multiple;
	/* 12版 */
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* 父元素-水平居中（主轴是横向才生效） */
#flex-hc {
	/* 09版 */
	-webkit-box-pack: center;
	/* 12版 */
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	/* 其它取值如下：
		align-items     主轴原点方向对齐
		flex-end        主轴延伸方向对齐
		space-between   等间距排列，首尾不留白
		space-around    等间距排列，首尾留白
 */
}

/* 父元素-纵向排列（主轴） */
#flex-v {
	// display: box;
	/* OLD - Android 4.4- */
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	/* 09版 */
	-webkit-box-orient: vertical;
	/* 12版 */
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

/* 父元素-纵向换行 */
#flex-vw {
	/* 09版 */
	-webkit-box-lines: multiple;
	/* 12版 */
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* 父元素-竖直居中（主轴是横向才生效） */
#flex-vc {
	/* 09版 */
	-webkit-box-align: center;
	/* 12版 */
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
}

#flex-1 {
	-webkit-box-ordinal-group: 1;
	/* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-ordinal-group: 1;
	/* OLD - Firefox 19- */
	-ms-flex-order: 1;
	/* TWEENER - IE 10 */
	-webkit-order: 1;
	/* NEW - Chrome */
	order: 1;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

#flex-2 {
	-webkit-box-ordinal-group: 2;
	/* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-ordinal-group: 2;
	/* OLD - Firefox 19- */
	-ms-flex-order: 2;
	/* TWEENER - IE 10 */
	-webkit-order: 2;
	/* NEW - Chrome */
	order: 2;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

#flex-jcsb{
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}

// transtion
.component-fade-enter-active, .component-fade-leave-active {
	transition: opacity .1s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0.6;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  width:100%;
  left:0;
}
.slide-right-enter {
  // opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  // opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  // opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  // opacity: 0;
  transform: translate3d(-100%, 0, 0);
}